<template>
  <div class="coupon">
      <Breadcrumb>
          <BreadcrumbItem>奖品</BreadcrumbItem>
          <BreadcrumbItem>门店卡券</BreadcrumbItem>
      </Breadcrumb>

      <!--S审核开关-->
      <div id="sheck-switch">
          <span>审核开关 </span><i-switch v-model="coupon_check" @on-change="changeSwitch"></i-switch>
      </div>
      <!--E审核开关-->

      <!--Stabs-->
      <Tabs :value="tabs[tab_index].name" @on-click="changeTabs">
          <TabPane v-for="item in tabs" :label="item.label" :name="item.name">
              <Table :columns="tr" :data="td" :highlight-row="true" :loading="table_loading"></Table>
          </TabPane>
      </Tabs>
      <div class="page" v-if="tabs[tab_index].total > page_size"><Page :total="tabs[tab_index].total" :current="tabs[tab_index].page+1" :page-size="page_size" v-on:on-change="pageChange"></Page></div>
      <!--Etabs-->
  </div>
</template>

<script>
export default {
    name: 'coupon',
    data(){
        return {
            activity_id:sysinfo.activity_id,  //活动id
            coupon_check:2,   //审核状态
            tab_index:0,  //tabs 当前下标
            tabs:[
                {     //通过审核的卡券列表
                    label:'活动卡券',
                    name:'approve',
                    status:1,
                    page:0,
                    total:0
                },
                {   //需要审核的卡券列表
                    label:'等待审核',
                    name:'check',
                    status:2,
                    page:0,
                    total:0
                },
                {  //撤销的卡券
                    label:'已撤销',
                    name:'annul',
                    status:4,
                    page:0,
                    total:0
                }
            ],
            //S表格
            tr:[
                {
                    title:'卡券名字',
                    key:'name'
                },
                {
                    title:'所属门店',
                    key:'store_name'
                },
                {
                    title:'门店地址',
                    key:'address'
                },
                {
                    title:'卡券类型',
                    key:'type'
                },
                {
                    title:'卡券面值',
                    key:'cost'
                },
                {
                    title:'库存',
                    key:'inventory'
                },
                {
                    title:'投放至',
                    key:'goal'
                },
                {
                    title:'有效期',
                    key:'period'
                },
                {
                    title:'操作',
                    key:'control',
                    render: (h, params) => {
                        return h('div',[
                            h('Button',{
                                props: {
                                    type: 'error',
                                    size: 'small'
                                }
                            },'撤销投放')
                        ]);
                    }
                }
            ],
            td:[],
            table_loading:false,  //表格状态
            //E表格
            page_size:10, //每页的请求数量
        }
    },
    beforeRouteEnter(to,from,next){
        next((vm)=>{
            //S判断系统是否开启了商场模式
            vm.testShopModel(from);
            //E判断系统是否开启了商场模式
        });
    },
    created(){
        this.setTrControl();
        this.getSetting();
        this.getTotal();
        this.getList();
    },
  methods:{
      //是否开启了商场模式，没有开启，返回上一页，进入进入该页面
      testShopModel(from){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activity',
            doing:'easyFind',
            activity_id:this.activity_id,
            return:['shop_model']
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    if(res.data.data.shop_model != 1){
                        if(from.name){
                            this.$router.replace({name:from.name});
                        }else{
                            this.$router.replace('/');
                        }
                    }
                }
             })
            .catch(error=>console.log(error));
      },
      //获取审核开关
      getSetting(){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activitySetting',
            doing:'getSetting',
            activity_id:this.activity_id,
            return:['coupon_check']
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    var data = res.data.data;
                    this.coupon_check = data.coupon_check == 2 ? true : false;
                }
                })
            .catch(error=>console.log(error));
      },
      //审核开关
      changeSwitch(value){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activitySetting',
            doing:'setting',
            activity_id:this.activity_id,
            data:{coupon_check:value?2:1}
        }))
            .then((res)=>{
                if(res.data.status == 'error'){
                    if(this.coupon_check){
                        this.coupon_check = false;
                    }else{
                        this.coupon_check = true;
                    }
                }
            })
            .catch(error=>console.log(error));
      },
      //获取列表总数
      getTotal(){
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'activityCoupon',
              doing:'getTotal',
              activity_id:this.activity_id,
              status:this.tabs[this.tab_index].status,
          }))
              .then((res)=>{
                  if(res.data.status == 'success'){
                      this.tabs[this.tab_index].total = parseInt(res.data.data);
                  }
              })
              .catch(error=>console.log(error));
      },
      //获取列表
      getList(){
          this.table_loading = true;
          Axios.post(sysinfo.url,Qs.stringify({
              pages:'activityCoupon',
              doing:'adminGetList',
              activity_id:this.activity_id,
              status:this.tabs[this.tab_index].status,
              limit:[this.tabs[this.tab_index].page*this.page_size,this.page_size]
          }))
              .then((res)=>{
                  if(res.data.status == 'success'){
                      this.td = res.data.data;
                  }else{
                      this.td = [];
                  }
                  this.table_loading = false;
              })
              .catch(error=>console.log(error));
      },
      //tabs切换
      changeTabs(value){
          if(value == 'approve'){
              this.tab_index = 0;
          }else if(value == 'check'){
              this.tab_index = 1;
          }else{
              this.tab_index = 2;
          }
          this.setTrControl();
          this.getTotal();
          this.getList();
      },
      //设置tr控制区域按钮
      setTrControl(){
        var data = {};
        if(this.tab_index == 0){
            data = {
                title:'操作',
                key:'control',
                render: (h, params) => {
                    return h('div',[
                        h('Button',{
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on:{
                                click:()=>{
                                    this.$Modal.confirm({
                                        title:'提示',
                                        content:'确定要撤销此卡券吗?',
                                        onOk:()=>{
                                            this.changeStatus(params.row.id,4);
                                        }
                                    })
                                }
                            }
                        },'撤销投放')
                    ]);
                }
            }
        }else if(this.tab_index == 1){
            data = {
                title:'操作',
                key:'control',
                render: (h, params) => {
                    return h('div',[
                        h('Button',{
                            props: {
                                type: 'success',
                                size: 'small'
                            },
                            style:{
                                marginRight:'5px'
                            },
                            on:{
                                click:()=>{
                                    this.$Modal.confirm({
                                        title:'提示',
                                        content:'确认投放此卡券吗?',
                                        onOk:()=>{
                                            this.changeStatus(params.row.id,1);
                                        }
                                    })
                                }
                            }
                        },'确认投放'),
                        h('Button',{
                            props: {
                                type: 'error',
                                size: 'small'
                            },
                            on:{
                                click:()=>{
                                    this.$Modal.confirm({
                                        title:'提示',
                                        content:'确认拒绝此卡券投放吗?',
                                        onOk:()=>{
                                            this.changeStatus(params.row.id,3);
                                        }
                                    })
                                }
                            }
                        },'拒绝')
                    ]);
                }
            }
        }else{
            data = {
                title:'操作',
                key:'control',
                render: (h, params) => {
                    return h('div',[
                        h('Button',{
                            props: {
                                type: 'info',
                                size: 'small'
                            },
                            style:{
                                marginRight:'5px'
                            },
                            on:{
                                click:()=>{
                                    this.$Modal.confirm({
                                        title:'提示',
                                        content:'确认恢复此卡券吗?',
                                        onOk:()=>{
                                            this.changeStatus(params.row.id,1);
                                        }
                                    })
                                }
                            }
                        },'恢复')
                    ]);
                }
            }
        }
        this.tr.splice(8,1,data);
      },
      //页面page切换
      pageChange(page){
          this.tabs[this.tab_index].page = page-1;
          this.getList();
      },
      //操作投放卡券的状态
      changeStatus(put_id,status){
        Axios.post(sysinfo.url,Qs.stringify({
            pages:'activityCoupon',
            doing:'changeStatus',
            put_id,
            status
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.getTotal();
                    this.getList();
                }else{
                    this.$Message.error('操作失败');
                }
            })
            .catch(error=>console.log(error));
      }
  }
}
</script>

<style scoped>
    .coupon{
        position: relative;
        padding:10px;
    }
    #sheck-switch{
        position:absolute;
        z-index:100;
        top:20px;
        right:10px;
        width:100px;
        height:22px;
    }
    #sheck-switch span:nth-child(1){
        position:relative;
        top:2px;
    }
    .page{
        margin-top:10px;
    }
    .ul .li{
        width:250px;
        height:100px;
        background: red;
    }
</style>
